
<template>
  <el-tree-select v-model="selectVal" filterable :data="menuList" check-strictly
    :default-expand-all="true" style="width:100%" @change="changeHandler" />
</template>

<script lang="ts" setup>
import { reqAllMenuTree } from "@/api/business/menu";
const props = defineProps({
  selectVal: {
    type: [String, Number],
    default: null,
  },
});
const menuList = ref([]);

const getAllMenuTree = () => {
  reqAllMenuTree({ returnSystem: true }).then((res) => {
    if (res.code == 1) {
      readNodes(res.data);
      menuList.value = res.data;
    }
  });
};

const selectVal = ref();
const readNodes = (nodes: any = [], arr: any = []) => {
  for (let item of nodes) {
    item.label = item.name;
    item.value = item.id;
    if (item.children && item.children.length) readNodes(item.children);
  }
};

const emits = defineEmits<{
  (event: "getParentId", data: number): void;
}>();

const changeHandler = (val) => {
  emits("getParentId", val);
};

const clearSelected = () => {
  selectVal.value = null;
};

onMounted(() => {
  getAllMenuTree();
});

defineExpose({
  selectVal,
  getAllMenuTree,
  clearSelected,
});
</script>

<style lang="scss">
// .el-select .el-select--default {
//   width: 220px;
// }
</style>